<template>
  <div class="min-w-[1000px]">
    <!-- 头部信息 -->
    <div class="flex justify-between items-center">
      <div class="flex space-x-4 my-4">
        <span>选择展示内容</span>
        <div class="flex space-x-2 items-center">
          <i class="el-icon-warning-outline text-primary" />
          <div class="text-main-content">
            <span>已添加</span>
            <span
              ><i class="text-primary">{{ selectDataList.length }}</i
              >/{{ totalCount }}条数据</span
            >
          </div>
        </div>
      </div>

      <el-button class="rounded-content-wrap" type="primary" size="small" @click="showSelect = true"
        >选择推荐项目</el-button
      >
    </div>

    <!-- 列表头 -->
    <el-row class="h-[42px] bg-[#fafafb] leading-[42px] rounded-content-wrap">
      <el-col :span="10" class="min-w-40 pl-12">项目名称</el-col>
      <el-col :span="3" class="max-w-20">项目状态</el-col>
      <el-col :span="3" class="max-w-20">项目类型</el-col>
      <el-col :span="3" class="max-w-20">拟投资额</el-col>
      <el-col :span="3" class="max-w-20">更新时间</el-col>
      <el-col :span="2" class="max-w-16">是否展示</el-col>
    </el-row>

    <!-- 列表项 -->
    <Draggable v-if="selectDataList.length > 0" :list="selectDataList" @end="handleEnd">
      <el-row
        v-for="item in selectDataList"
        :key="item.id"
        class="h-[72px] leading-[72px] cursor-move"
      >
        <el-col :span="10" class="min-w-40 flex items-center">
          <div class="w-12 text-center text-[#E7E7E7] flex items-center justify-center">
            <i class="iconfont icon-caidansangehengxian text-2xl" />
          </div>
          <el-image
            class="rounded-[4px] w-[42px] h-[42px] flex-none mr-2"
            :src="getFirstImage(item)"
            fit="fill"
          ></el-image>
          <span>{{ item.data.name }}</span>
        </el-col>
        <el-col :span="3" class="max-w-20">
          {{ item.data.statusLabel }}
        </el-col>
        <el-col :span="3" class="max-w-20"> {{ item.data.typeLabel }}</el-col>
        <el-col :span="3" class="max-w-20"> {{ item.data.investment }} 亿元</el-col>
        <el-col :span="3" class="max-w-20">{{ item.updatedTime }} </el-col>
        <el-col :span="2" class="max-w-16">
          <el-checkbox :checked="true" @change="handleCheckedChange(item)"></el-checkbox>
        </el-col>
      </el-row>
    </Draggable>

    <el-empty v-else description="暂无数据">
      <div>
        <span>请前往</span>
        <el-button type="text" @click="$router.push('/admin/manage/project')">项目管理</el-button>
        <span>中添加项目</span>
      </div>
    </el-empty>

    <SelectProject
      ref="select"
      :id-list.sync="form.recommendProject"
      :visible.sync="showSelect"
      @onRefresh="$emit('onRefresh')"
    />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Draggable from 'vuedraggable'
import draggableMixin from '../common/draggableMixin'
import SelectProject from './SelectProject.vue'

export default Vue.extend({
  components: { Draggable, SelectProject },
  mixins: [
    draggableMixin({
      templateName: 'B_CONSOLE_PROJECT',
      formKey: 'recommendProject',
    }),
  ],
  props: {
    parkId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      form: {
        recommendProject: [],
      },
      showSelect: false,
    }
  },
  head: {
    title: '推荐项目',
  },
  watch: {
    // parkId: {
    //   immediate: true,
    //   handler() {
    //     this.form.recommendProject = []
    //   },
    // },
  },
})
</script>
<style lang="scss" scoped></style>
